<!--
 * @Author       : 刘洋 liuy5335@163.com
 * @Date         : 2025-03-20 10:45:29
 * @LastEditors  : 刘洋 liuy5335@163.com
 * @LastEditTime : 2025-03-20 10:45:47
 * @FilePath     : \zhly-vform\src\components\form-render\container-item\table-sub-form-item.vue
 * @Description  : 介绍文件的作用
 * 
 * Copyright (c) 2025 by zhlx - liuy5335@163.com, All Rights Reserved. 
-->
<template>
	<container-item-wrapper :widget="widget">
		<template v-if="(layoutType === 'H5') || (layoutType === 'Pad')">
			<!-- 移动端 -->
			<div class="m-formTableMain">
				<div class="m-opt">
					<span>{{i18nt('render.hint.subFormAction')}}</span>
					<el-button v-show="
						!isReadMode &&
						widget.options.enableAdd &&
						!actionDisabled
					" :disabled="actionDisabled" type="primary" icon="el-icon-plus" size="small" circle
						@click="addSubFormRow"></el-button>
				</div>
				<div class="m-body" :key="key">
					<template v-for="(data, $index) in tsfDataModel">
						<div class="m-index">
							<span># {{ $index + 1 }}</span>

							<el-button v-show="!isReadMode && !actionDisabled" :disabled="
								actionDisabled || !widget.options.enableDelete
							" type="danger" icon="el-icon-delete" size="small" plain circle @click="deleteSubFormRow($index)"></el-button>
						</div>
						<template v-for="(subWidget, colIdx) in widget.widgetList">
							<div class="m-cell" v-show="!subWidget.options.hidden">
								<div class="m-components">

									<component :disabled="subWidget.options.disabled" :is="getFieldWidget(subWidget.type)"
										:field="getFieldSchemaData($index, colIdx, subWidget)"
										:parent-list="widget.widgetList" :index-of-parent-list="colIdx"
										:parent-widget="widget" :sub-form-row-id="getRowId($index)"
										:sub-form-row-index="getRowIndex($index)" style="width:100%" />

								</div>
							</div>
						</template>
					</template>

				</div>
			</div>
		</template>
		<template v-else>
			<div :key="widget.id" class="formTable-container" v-show="!widget.options.hidden">
			 
				<sc-form-table ref="tableRef" :key="key" v-model="tsfDataModel" :drag-sort="
					widget.options.dragSort && !actionDisabled && !isReadMode
				" :placeholder="widget.options.placeholder" :showRowAdd="false" :showRowDel="false"
					:dragEndEvent="handlerDragEndEvent()" :isReadMode="isReadMode" :maxHeight="widget.options.maxHeight"
					:showIndex="widget.options.showIndex" :scrollbarAlways="widget.options.scrollbarAlways"
					:showSummary="widget.options.showSummary">
					<template #header>
						<el-button v-show="
							!isReadMode &&
							widget.options.enableAdd &&
							!actionDisabled
						" :disabled="actionDisabled" type="primary" icon="el-icon-plus" size="small" circle
							@click="addSubFormRow"></el-button>
					</template>
					<template #rowDel="data">
						<el-button v-show="!actionDisabled" :disabled="
							actionDisabled || !widget.options.enableDelete
						" type="danger" icon="el-icon-delete" size="small" plain circle
							@click="deleteSubFormRow(data.scope.$index)"></el-button>
					</template>
					<template v-for="(subWidget, colIdx) in widget.widgetList">
						<el-table-column 
						  :fixed="subWidget.options.hidden"
						  :prop="subWidget.options.name" :label="subWidget.options.label"
              header-align="center" :class-name="'tableCol' + subWidget.options.name + ' ' +(subWidget.options.hidden?'tableColHidden':'')+' '+
								(!!subWidget.options.required ? 'is-required' : '') "
							align="center" :disabled="subWidget.options.disabled" :width="getWidth(subWidget)">
							<template #header>
								<template v-if="subWidget.options.hidden">
									q
								</template>
								<template v-else>
									<span v-if="!!subWidget.options.labelIconClass" class="custom-label">
									<template v-if="subWidget.options.labelIconPosition === 'front'">
										<template v-if="!!subWidget.options.labelTooltip">
											<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
												<el-icon>
													<component :is="subWidget.options.labelIconClass" />
												</el-icon></el-tooltip>{{ subWidget.options.label }}</template>
										<template v-else>
											<el-icon>
												<component :is="subWidget.options.labelIconClass" />
											</el-icon>{{ subWidget.options.label }}</template>
									</template>
									<template v-else-if="subWidget.options.labelIconPosition === 'rear'">
										<template v-if="!!subWidget.options.labelTooltip">
											{{ subWidget.options.label }}<el-tooltip :content="subWidget.options.labelTooltip"
												effect="light">
												<el-icon>
													<component :is="subWidget.options.labelIconClass" />
												</el-icon></el-tooltip></template>
										<template v-else>
											{{ subWidget.options.label }}<el-icon>
												<component :is="subWidget.options.labelIconClass" />
											</el-icon></template>
									</template>
								</span>
								<span v-else>{{ subWidget.options.label }}</span>
								</template>
							
							</template>

							<template #default="scope">
								<component :disabled="subWidget.options.disabled" :is="subWidget.type + '-widget'"
									:field="getFieldSchemaData(scope.$index, colIdx, subWidget)"
									:key="getFieldSchemaData(scope.$index, colIdx).id" :parent-list="widget.widgetList"
									:index-of-parent-list="colIdx" :parent-widget="widget"
									:sub-form-row-id="getRowId(scope.$index)"
									:sub-form-row-index="getRowIndex(scope.$index)" :sub-form-col-index="colIdx" :style="{
										width: subWidget.options.columnWidth,
									}" />
							</template>
						</el-table-column>
					</template>

				</sc-form-table>

			</div>
		</template>
		<el-pagination v-if="widget.options.showPagination" :current-page="currentPage" :page-sizes="pageSizes"
			:page-size="pageSize" :layout="paginationLayout" :total="widget.options.pagination.total"
			@size-change="handlePageSizeChange" @current-change="handleCurrentPageChange">
		</el-pagination>

	</container-item-wrapper>
</template>

<script>
import { deepClone, generateId } from "@/utils/util";
import emitter from "@/utils/emitter";
import i18n from "@/utils/i18n";
import refMixin from "@/components/form-render/refMixin";
import ContainerItemWrapper from "@/components/form-render/container-item/container-item-wrapper";
import containerItemMixin from "@/components/form-render/container-item/containerItemMixin";
import FieldComponents from "@/components/form-designer/form-widget/field-widget/index";

import scFormTable from "@/components/sc-form-table";
export default {
	name: "table-sub-form-item",
	componentName: "ContainerItem",
	mixins: [emitter, i18n, refMixin, containerItemMixin],
  inject: ["refList", "sfRefList", "globalModel", "getReadMode"],
	components: {
		ContainerItemWrapper,
		...FieldComponents,
		scFormTable,
	},
	props: {
		widget: Object,
	},
	provide() {
		return {
			getSubFormFieldFlag: () => true,
			getSubFormName: () => this.widget.options.name,
			formTable: this
		};
	},
	computed: {
		getRowId() {
			return ($index) => {
				const index = this.getRowIndex($index);
				return this.rowIdData[index];
			}
		},
		getFieldSchemaData() {
			return ($index, colIdx, subWidget) => {
				const index = this.getRowIndex($index);
				const fieldData = this.fieldSchemaData[index][colIdx];
				if (fieldData && subWidget) {
					//主要为了解决 换页时 更新【禁用】的属性
					fieldData.options.disabled = subWidget.options.disabled;
				}
				return fieldData;
			}
		},
		tsfDataModel: {
      get() {
        if (this.widget.options.showPagination && this.formModel[this.widget.options.name].length > 0) {
          this.widget.options.pagination.total = this.formModel[this.widget.options.name].length;

          const page_number = this.currentPage;
          const page_size = this.widget.options.pagination.pageSize;
          const start = (page_number - 1) * page_size;
          // 计算分页结束的索引
          const end = page_number * page_size;
          // 返回分页后的数组
          return this.formModel[this.widget.options.name].slice(start, end);
        } else {
          return this.formModel[this.widget.options.name]
        }
      },
      set(val) {
        //
      }
		},
		isReadMode() {
			return this.getReadMode();
		},
		customClass() {
			return this.widget.options.customClass || "";
		},
		getWidth() {
			return (item) => {
				if (this.widget.options.autoWidth) {
					return null;
				}
				else {
					if (item.options.hidden) {
						return "-1px";
					}
					return item.options.columnWidth;
				}
			}
		},
		paginationLayout() {
			return "total,prev,pager,next";
		},
		layoutType() {
			return this.getFormRef().formConfig.layoutType;
		},
	},
	created() {
		this.initRefList();
		this.registerSubFormToRefList();
		this.initRowIdData(true);
		this.initFieldSchemaData();
		this.initEventHandler();

    this.handleOnCreated()
	},
	mounted() {
    this.handleSubFormFirstRowAdd(); //默认添加首行后，主动触发相关事件！！
    setTimeout(() => {
      this.initColumnHidden();
    }, 100)

    this.handleOnMounted()
	},
	beforeUnmount() {
		this.unregisterFromRefList();
	},
	data() {
		return {
			fieldSchemaData: [],
			rowIdData: [],
			actionDisabled: false,
			key: 0, //用于刷新表格，才能让子组件更新。重置表单、新增、删除时用到。
			pageSize: this.widget.options.pagination.pageSize,
			pageSizes: this.widget.options.pagination.pageSizes,
			currentPage: this.widget.options.pagination.currentPage,
			total: this.widget.options.pagination.total,
			tableData: [],
			hiddenIndex:0
		};
	},
	methods: {
		initColumnHidden() {
			this.$nextTick(()=>{
				if(!((this.layoutType === 'H5') || (this.layoutType === 'Pad'))){
							//获取影藏的列
						const hiddenCol = [];
						this.widget.widgetList.forEach(it => {
							if (it.options.hidden) {
								hiddenCol.push(it.options.name);
							}
						});
						if (hiddenCol.length > 0) {
							this.hiddenIndex=hiddenCol.length;
						}
				}
			
			})
		},
		doLayout(){
			this.$refs.tableRef.refreshLayout();
		},
		resetPage() {
			this.currentPage = 1;
			this.widget.options.pagination.currentPage = 1;
		},
		setDisabled(bl) {
			if (bl) {
				this.disableSubForm();
			}
			else {
				this.enableSubForm();
			}
		},
		getRowIndex(rowIndex) {
			if (this.widget.options.showPagination) {
				const index = this.widget.options.pagination.pageSize * (this.currentPage - 1) + rowIndex;
				return index;
			}
			else {
				return rowIndex;
			}
		},
		handlePageSizeChange() {

		},
		handleCurrentPageChange(curPage) {
			this.widget.options.pagination.currentPage = curPage;
			this.currentPage = curPage;
			this.key++;
		},
		submitForm() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					alert("请看控制台输出");
					console.log(this.form);
				} else {
					return false;
				}
			});
		},
		//校验字段
		validate(showTip = true) {
			if (this.widget.options.enableValidate && this.widget.options.validateArr && this.widget.options.validateArr.length > 0) {
				for (let i = 0; i < this.widget.options.validateArr.length; i++) {
					const errorMsg = this.validateItem(this.widget.options.validateArr[i], showTip);
					if (!!errorMsg) {
						//有一个校验失败 则停止。
						return errorMsg;
					}
				}
			}

			let index = 0;
			this.fieldSchemaData.forEach(wdList => {
				wdList.forEach(item => {
					this.getWidgetRefOfSubForm(item.options.name, index).validate()
				});
				index++;
			})
			return true;
		},
		validateItem(validateData, showTip) {
			const colSum = this.getSumByCol(validateData.columnName);
			//2,获取目标组件的值
			const mValue = this.getValidateCompValue(validateData.validateField);
			console.log(colSum, mValue);
			let curValue= !!!colSum?0:colSum;
			let targetValue=!!!mValue?0:mValue;

			if(!isNaN(curValue) && !isNaN(targetValue)){
				console.log("进行比较");
				const evalStr = new Function(`return ${curValue} ${validateData.rule} ${targetValue}`);

				const result = evalStr.call(this);
				if (result) {
					//校验成功
					return "";
				}
				else {
					//校验失败
					if (showTip) {
						this.$message.warning(validateData.errMsg || `[${this.widget.options.label}] 校验失败`);
					}
					if (validateData.errMsg) {
						return validateData.errMsg;
					}
					else {
						return `[${this.widget.options.label}] 校验失败`;
					}
				}
			}
			else {
				//字符串没法比较，默认校验成功
				return "";
			}
		},
		/**
		 * 扩展： 获取自定义校验：目标组件的值
		 * @param {*} validateField 
		 */
		getValidateCompValue(validateField) {
			let mValue = 0;
			let fieldId;
			if (typeof validateField == "string") {
				fieldId = validateField;
			}
			else {
				fieldId = validateField[validateField.length - 1];
			}

			//尝试直接找到组件
			let targetRef = this.getWidgetRef(fieldId);
			if (targetRef) {
				mValue = targetRef.getValue() || 0;
			}
			//找不到：表示目标组件在可能在子表单中。
			else {
				const keys = Object.keys(this.formModel);
				let formTableId;
				for (let i = 0; i < keys.length; i++) {
					const key = keys[i];
					if (typeof this.formModel[key] == "object" && Array.isArray(this.formModel[key])) {
						//尝试找到目标字段
						const field = this.formModel[key].find(it => it.hasOwnProperty(fieldId));
						if (field) {
							formTableId = key;
							console.log("在子表单中");
							break;
						}
					}
				}
				if (formTableId) {
					mValue = this.getWidgetRef(formTableId).getSumByCol(fieldId);
					console.log("子表单中==>mvalue:", mValue);
				}
			}
			if (mValue) {
				if (isNaN(mValue)) {
					mValue?.replace(/,/g, "");
				} else {
					return mValue;
				}

			} else {
				return "";
			}

		},
		/**
		 * 获取某个列的总和
		 * @param {*} colName 
		 */
		getSumByCol(colName) {
			let colSum = 0;
			const columnProps = this.widget.widgetList.find(
				(it) => it.options.name == colName
			);
			if (!columnProps) {
        //
			} else {

				this.formModel[this.widget.options.name].forEach(wdList => {
					let value = 0;
					if (wdList.hasOwnProperty(colName)) {
						value = wdList[colName];
            
						if (isNaN(value)) {
							value = Number(value.replace(/,/g, ""));
						}
					}
					if (value == 0) {
            //
					} else {
						if (columnProps.options.precision) {
							colSum += Number(parseFloat(value + "").toFixed(
								columnProps.options.precision
							));
						} else {
							colSum += Number(value);
						}

					}
				});
			}
			return Number(colSum);
		},
		resetForm() {
			this.$refs.ruleForm.resetFields();
		},
		/**
		 * 单独给子表单赋值
		 * 注意：该方法仅触发组件的onChange事件以及子表单的onFormRowChange事件，不会触发表单的onFormDataChange等其他事件！！
		 * @param subFormValues
		 */
		setSubFormValues(subFormValues) {
			this.globalModel.formModel[this.widget.options.name] =
				subFormValues;
			this.initRowIdData(false);
			this.initFieldSchemaData();

			setTimeout(() => {
				//延时触发SubFormRowChange事件, 便于更新计算字段！！
				this.handleSubFormRowChange(subFormValues);
			}, 300);
		},
		registerSubFormToRefList() {
			if (this.widget.type === "table-sub-form") {
				this.sfRefList[this.widget.options.name] = this;
			}
		},

		initRowIdData(initFlag) {
			if (this.widget.type === "table-sub-form") {
				this.rowIdData.splice(0, this.rowIdData.length); //清除数组必须用splice，length=0不会响应式更新！！
				let subFormModel = this.formModel[this.widget.options.name];
				if (!!subFormModel && subFormModel.length > 0) {
					subFormModel.forEach(() => {
						this.rowIdData.push("id" + generateId());
					});

					if (!!initFlag) {
						//注意：事件触发需延期执行，SumFormDataChange事件处理代码中可能存在尚未创建完成的组件！！
						setTimeout(() => {
							this.handleSubFormRowChange(subFormModel);
						}, 800);
					}
				}
			}
		},

		addToRowIdData() {
			this.rowIdData.push("id" + generateId());
		},

		insertToRowIdData(rowIndex) {
			this.rowIdData.splice(rowIndex, 0, "id" + generateId());
		},

		deleteFromRowIdData(rowIndex) {
			this.rowIdData.splice(rowIndex, 1);
		},

		getRowIdData() {
			return this.rowIdData;
		},

		getWidgetRefOfSubForm(widgetName, rowIndex) {
			let realWidgetName = widgetName + "@row" + this.rowIdData[rowIndex];
			return this.getWidgetRef(realWidgetName);
		},

		initFieldSchemaData() {
			//初始化fieldSchemaData！！！
			if (this.widget.type !== "table-sub-form") {
				return;
			}

			let rowLength = this.rowIdData.length;
			this.fieldSchemaData.splice(0, this.fieldSchemaData.length); //清除数组必须用splice，length=0不会响应式更新！！
			if (rowLength > 0) {
				for (let i = 0; i < rowLength; i++) {
					let fieldSchemas = [];
					this.widget.widgetList.forEach((swItem) => {
						fieldSchemas.push(this.cloneFieldSchema(swItem));
					});
					this.fieldSchemaData.push(fieldSchemas);
				}
			}
		},

		addToFieldSchemaData(rowIndex) {
			let fieldSchemas = [];
			this.widget.widgetList.forEach((swItem) => {
				fieldSchemas.push(this.cloneFieldSchema(swItem));
			});

			if (rowIndex === undefined) {
				this.fieldSchemaData.push(fieldSchemas);
			} else {
				this.fieldSchemaData.splice(rowIndex, 0, fieldSchemas);
			}
		},

		deleteFromFieldSchemaData(rowIndex) {
			this.fieldSchemaData.splice(rowIndex, 1);
		},

		cloneFieldSchema(fieldWidget) {
			let newFieldSchema = deepClone(fieldWidget);
			newFieldSchema.id = fieldWidget.type + generateId();
      newFieldSchema.oid = fieldWidget.id  //非常重要：保留原始id，用于计算公式的自动计算!!
			return newFieldSchema;
		},

		initEventHandler() {
			if (this.widget.type !== "table-sub-form") {
				return;
			}

			this.on$('setFormData', (params) => {
        const newFormData = params[0], disableChangeEvent = params[1]
				console.log("子表单===>", newFormData);
				this.initRowIdData(false);
				this.initFieldSchemaData();

				let subFormData = newFormData[this.widget.options.name] || [];
				setTimeout(() => {
					//延时触发SubFormRowChange事件, 便于更新计算字段！！
					this.handleSubFormRowChange(subFormData);
				}, 800);


				if ((this.layoutType === 'H5') || (this.layoutType === 'Pad')) {
					//解决移动端 首行没有数据
					setTimeout(() => {
						this.key++;
					}, 50)
				}

			});
		},

		handleSubFormFirstRowAdd() {
			if (this.widget.type !== "table-sub-form") {
				return;
			}
			if (
				!!this.widget.options.showBlankRow &&
				this.rowIdData.length === 1
			) {
				let oldSubFormData =
					this.formModel[this.widget.options.name] || [];
				this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[0], 0);
				this.handleSubFormRowChange(oldSubFormData);
			}
		},

		addSubFormRow(fieldData = null) {
			let newSubFormDataRow = {};
			this.widget.widgetList.forEach((subFormItem) => {
				if (!!subFormItem.formItemFlag) {
					newSubFormDataRow[subFormItem.options.name] =
						subFormItem.options.defaultValue;
				}
			});

			let oldSubFormData = this.formModel[this.widget.options.name] || [];
			oldSubFormData.push(newSubFormDataRow);
			this.addToRowIdData();
			this.addToFieldSchemaData();

			//nextTick打开后 默认值赋值不成功，原因是【this.rowIdData.length - 1】 传入的值始终是最后一个
			this.handleSubFormRowAdd(
				oldSubFormData,
				this.rowIdData[oldSubFormData.length - 1],
				this.rowIdData.length - 1,
				fieldData
			);
			this.handleSubFormRowChange(oldSubFormData);

			setTimeout(()=>{
				this.doLayout();
				console.log("刷新")
			},1000);

		},
		insertSubFormRow(beforeFormRowIndex) {
			let newSubFormDataRow = {};
			this.widget.widgetList.forEach((subFormItem) => {
				if (!!subFormItem.formItemFlag) {
					newSubFormDataRow[subFormItem.options.name] =
						subFormItem.options.defaultValue;
				}
			});

			let oldSubFormData = this.formModel[this.widget.options.name] || [];
			oldSubFormData.splice(beforeFormRowIndex, 0, newSubFormDataRow);
			this.insertToRowIdData(beforeFormRowIndex);
			this.addToFieldSchemaData(beforeFormRowIndex);

			this.handleSubFormRowInsert(
				oldSubFormData,
				this.rowIdData[beforeFormRowIndex]
			);
			this.handleSubFormRowChange(oldSubFormData);
		},

		deleteSubFormRow(formRowIndex) {
			this.$confirm(
				this.i18nt("render.hint.deleteSubFormRow") + "?",
				this.i18nt("render.hint.prompt"),
				{
					confirmButtonText: this.i18nt("render.hint.confirm"),
					cancelButtonText: this.i18nt("render.hint.cancel"),
				}
			)
				.then(() => {
					const startIndex = (this.currentPage - 1) * this.pageSize;
					const rowIndex=startIndex + formRowIndex;
					this.deleteRow(rowIndex);
				})
				.catch(() => {
					//
				});
		},
		deleteRow(formRowIndex) {
			let oldSubFormData = this.formModel[this.widget.options.name] || [];
			let deletedDataRow = deepClone(oldSubFormData[formRowIndex]);
			oldSubFormData.splice(formRowIndex, 1);
			this.deleteFromRowIdData(formRowIndex);
			this.deleteFromFieldSchemaData(formRowIndex);

			this.handleSubFormRowDelete(oldSubFormData, deletedDataRow);
			this.handleSubFormRowChange(oldSubFormData);
			this.key++; //需要重新刷新表格实例，否则数据不会生效
		},

		handleSubFormRowChange(subFormData) {
			if (!!this.widget.options.onSubFormRowChange) {
				let customFunc = new Function(
					"subFormData",
					this.widget.options.onSubFormRowChange
				);
				customFunc.call(this, subFormData);
			}
			setTimeout(()=>{
				this.key++; //需要重新刷新表格实例，否则数据不会生效
				this.initColumnHidden();
			},500)
		},

		handleSubFormRowAdd(subFormData, newRowId, rowIndex, defaultFieldData = null) {
			if (!!this.widget.options.onSubFormRowAdd) {
				let customFunc = new Function(
					"subFormData",
					"newRowId",
					"rowIndex",
					"defaultFieldData",
					this.widget.options.onSubFormRowAdd
				);
				customFunc.call(
					this,
					subFormData,
					newRowId,
					rowIndex,
					defaultFieldData
				);
			}
		},

		handleSubFormRowInsert(subFormData, newRowId) {
			if (!!this.widget.options.onSubFormRowInsert) {
				let customFunc = new Function(
					"subFormData",
					"newRowId",
					this.widget.options.onSubFormRowInsert
				);
				customFunc.call(this, subFormData, newRowId);
			}
		},

		handleSubFormRowDelete(subFormData, deletedDataRow) {
			if (!!this.widget.options.onSubFormRowDelete) {
				let customFunc = new Function(
					"subFormData",
					"deletedDataRow",
					this.widget.options.onSubFormRowDelete
				);
				customFunc.call(this, subFormData, deletedDataRow);
			}
		},
		//拖拽结束事件
		handlerDragEndEvent() {
			const _this = this;
			let subFormData = this.formModel[this.widget.options.name] || [];
			return (newIndex, oldIndex) => {
				if (!!_this.widget.options.onSubFormRowDragEnd) {
					let customFunc = new Function(
						"newIndex",
						"oldIndex",
						"subFormData",
						this.widget.options.onSubFormRowDragEnd
					);
					customFunc.call(_this, newIndex, oldIndex, subFormData);
				}
			};
		},
		/* 强制刷新，重新生成整个子表单组件！！！ */
		forceUpdate() {
			this.key = generateId()
		},
		setColumnHidden(cols = [], hidden = true) {
      //
		}
	},
};
</script>

<style lang="scss" scoped>
div.formTable-container {
	margin-bottom: 10px;
  
	:deep(.tableColHidden) {
		//display: none !important;
		.cell{
			display: none !important;
			width: 0;
		}
	}

	:deep(.el-form-item__label) {
		display: none;
	}

	:deep(.el-form-item) {
		margin-bottom: 0;
	}

	:deep(.el-table__body .cell) {
		padding: 15px;
		overflow: initial;
		display: flex;
		justify-content: space-around;
	}

	:deep(.el-table__header .is-required .cell:before) {
		content: "*";
		color: #f56c6c;
		margin-right: 4px;
	}

	//调整一些组件无法居中的问题
	:deep(.el-form-item__content) {
		justify-content: center;
	}

	:deep(.el-radio-group) {
		justify-content: center;
		text-align: initial;
	}

	:deep(.el-checkbox-group) {
		//margin-right: 32px;
		text-align: initial;
	}

	span.custom-label i {
		margin: 0 3px;
	}

}

//移动端
.m-formTableMain {
	margin: 5px;
	border: 1px solid #f1f1f1;

	:deep(.el-form-item__label) {
		//display: none;
	}

	.m-opt {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		background-color: #f1f1f1;
		border-bottom: 1px solid #f3d9d9;
	}
  
	.m-body {
		.m-index {
			display: flex;
			padding: 5px 10px;
			background-color: #f1f1f1;
			justify-content: space-between;
			align-items: center;
		}

		.m-cell {
			flex-wrap: wrap;
			position: relative;
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
			overflow: hidden;
			color: var(--van-cell-text-color);
			font-size: var(--van-cell-font-size);
			line-height: var(--van-cell-line-height);
			background: var(--van-cell-background);

			.m-title {
				flex: none;
				box-sizing: border-box;
				width: var(--van-field-label-width);
				margin-right: var(--van-field-label-margin-right);
				color: var(--van-field-label-color);
				text-align: left;
				word-wrap: break-word;
			}
      
		}

		.m-components {
			width: 100%;
		}
	}
}</style>
